<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="wrap"> <div class="box"> <h2>AL Razy</h2> <p class="social">@alrazy</p> </div> </div> </div> </div>

.wrap { min-height: 100vh; display: flex; justify-content: center; align-items: center; font-family: sans-serif; font-weight: 100; color: white; } .box { background: black url(https://unsplash.it/1500/1500?image=560&blur=0.5) center fixed no-repeat; width: 50px; height: 50px; padding: 50px; transition: width 0.2s, height 0.6s; position: relative; } .box.opening { width: 500px; height: 500px; } .box h2 { position: absolute; width: 100%; font-size: 100px; transform: translateX(-200%); transition: all 0.5s; top: 0; } .box p { position: absolute; width: 100%; transform: translateX(200%); transition: all 0.5s; bottom: 0; } .box.open > * { transform: translateX(0%); }

const box = document.querySelector('.box'); box.addEventListener('click', function() { let first = 'opening'; let second = 'open'; if(this.classList.contains(first)) { // switch them [first, second] = [second, first]; } this.classList.toggle(first); setTimeout(() => { this.classList.toggle(second); }, 250); });